<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/general.css"/>
		<style type="text/css">
			.mdata{
				width: 100%;
				background-color: white;
				padding: 0.5em;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-bottom: 0.3em;
			}
			.mimg{
				margin: 0.5em;
			}
			.mimg>img{
				width: 70px;
				height: 70px;
			}
			.mtext{
				display: flex;
				justify-content: center;
				align-items: flex-start;
				flex-direction: column;
			}
			.context{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: flex-start;
				height: calc(100% - 70px);
			}
			.tleft{
				width: 25%;
			}
			.tright{
				width: 75%;
				height: 100%
			}
			.tmain{
				width: 100%;
				height: 100%;
			}
			.tleft>div{
				width: 100%;
				height: 2.5em;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.bgw{
				background-color: white;
			}
			.goodsdiv{
				width: 100%;
				padding: 0.2em;
				height: auto;
				border-bottom: 1px solid #ACACB4;
			}
			
			.topdiv{
				width: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
			.botdiv{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
			}
			.toptext{
				width: 60%;
				display: flex;
				align-items: flex-start;
				justify-content: center;
				flex-direction: column;
				
				padding-left: 0.2em;
			}
			.topimg{
				width: 25%;
				height: auto;
			}
			.topimg>img{
				border-radius: 50%;
				width: 100%;
				height: 100%;
			}
			.qian{
				width: 50%;
			}
			.mui-numbox {
			    width: 100px;
			    height: 30px;
			    padding: 0 30px;
			}
			.mui-numbox [class*=btn-numbox], .mui-numbox [class*=numbox-btn] {
    			width: 30%;
			}
			
			.content{
				width: 100%;
				background-color: #F2F2F2;
				padding: 10px;
			}
			.search{
				display: flex;
				justify-content: center;
				align-content: center;
				padding: 10px;
				background-color: white;
			}
			.simg{
				width: 30px;
				height: 30px;
			}
			.simg>img{
				width: 100%;
				height: 100%;
			}
			.ssdiv{
				width: 75%;
			}
			.ssinp{
				width: 100%;
				height: 100%;
				border: 0;
				padding-left: 20px;
			}
			
			.context{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: flex-start;
				height: calc(100% - 70px);
			}
			.tleft{
				width: 25%;
			}
			.tright{
				width: 75%;
				
				height: 100%
			}
			.tmain{
				width: 100%;
				height: 100%;
			}
			.tleft>div{
				width: 100%;
				height: 2.5em;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.bgw{
				background-color: white;
			}
			
			.botdiv{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		
			.qian{
				width: 50%;
			}
			.textdiv{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		</style>
	</head>



	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">积分兑换</h1>
		    <!--
            	作者：592176224@qq.com
            	时间：2019-02-22
            	描述：
		    <div class="hicon mui-icon-right-nav mui-pull-right" id="adddiv">
		    	<img src="../../img/add.png"/>
		    </div>
            -->
		</header>
		<div id="refreshContainer"  class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
		    <div class="mdata" id="memberid">
		    	
		    </div>
		    <div class="content">
		    	<div class="search">
		    		<div class="simg">
		    			<img src="../img/ss-img2.png"/>
		    		</div>
		    		<div class="ssdiv">
		    			<form action="" onkeydown="if(event.keyCode==13)return false;">
							<input id="keyvalue" class="ssinp" placeholder="请输入编码/名称" />
						</form>
						<!--
                        	作者：592176224@qq.com
                        	时间：2019-03-18
                        	描述：
		    			<input class="ssinp" type="" name="" id="" value=""  placeholder="请输入编码或名称"/>
                        -->
		    		
		    		</div>
		    		<div class="simg">
		    			<!--
                        	作者：592176224@qq.com
                        	时间：2019-01-24
                        	描述：
		    			<img src="../images/60x60.gif"/>
                        -->
		    		</div>
		    	</div>
		    </div>
		    <div class="context">
		    	<div class="tleft fe09" id="selectdiv">
		    		<!--
                    	作者：592176224@qq.com
                    	时间：2019-01-14
                    	描述：
		    		<div class="bgw"  href="#" id="1">
		    			所有商品
		    		</div>
		    		<div class="" href="#" id="1">
		    			1个商品
		    		</div>
		    		<div class="" id="2" href="#">
		    			2个商品
		    		</div>
                    -->
		    	</div>
		    	<div class="tright bgw">
		    		<div class="tmain" id="tmain">
                       
		    			 	
		    		</div>
		    		<div class="morediv hidden" id="moreid">
				   		<span id="more_list">更多</span>
				   	</div>
				   	<div class="footgd"></div>
				   	<div class="footgd"></div>
		    	</div>
		    </div>
		    
		   </div>
		    
		  
		    <div class="footdiv">
		    	<div class="fleft">
		    		
		    		<div class="" id="moneyid">
		    			积分：0
		    		</div>
		    	</div>
		    	<div class="fright" id="subut">
		    		立即兑换
		    	</div>
		    </div>
		
		</div>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.js"></script>
		<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var cash = null;
			(function(){
				var cashier = function(){};
				$.extend(cashier.prototype, {
					mid:0,			//会员id
					sort_id:0,
					pagenums:1,		//分页
					tarnum:0,
					glist:[],		//商品数组
					sex:0,
					stay_score:0,		//会员可用积分
					flag:false,
					plist : [],
					onReady:function(){
						var that = this;
						mui.init({
							 pullRefresh: {
						        container: '#refreshContainer',
						        down: {
						            callback: pulldownRefresh
						        },
						        up:{
						        	callback: pullupRefresh
						        }
						    }
						});
						function pullupRefresh(){
							that.more_list();
							mui('#refreshContainer').pullRefresh().endPullupToRefresh();
						}
						function pulldownRefresh(){
							that.pagenums = 1;
				      		that.plist = [];
				      		upToRefresh();
				      		that.getsortlist();
						}
						
						that.mid = getrequest().mid;
						mui.plusReady(function(){
							var view =  plus.webview.currentWebview();
							that.mid = view.mid;
						})
						
						//更多
						g("more_list").addEventListener("tap",function(){
							that.more_list();
						})
						
						that.setfunction();
						//mui('.mui-scroll-wrapper').scroll();
					},
					
					more_list:function(){
						var that = this;
						that.pagenums++;
						that.getsortlist();
					},
					
					setfunction:function(){
						var that = this;
						//监听左侧选项
						$('#selectdiv').on('tap', 'div', function(e) {
		                	var targettab = this.getAttribute('id');
		               	 	console.log(targettab);
			                that.tarnum = targettab;
			                var targetclass = this.getAttribute('class');
				                if(targetclass == ""&&targettab != "addproduct"){
				                	$(this).addClass('bgw').siblings().removeClass('bgw');
				                	that.pagenums = 1;
				                	that.plist = [];
				                	upToRefresh();
				                	that.getsortlist(targettab);
				                	
				                }else{
				                	
				                }
		           	 	});
		           	 	
		           	 	//监听兑换
						$('#subut').on('tap',function(e) {
							var list = that.glist;
							if(list.length < 1){
								mui.toast("请选择兑换的商品");
								return;
							}
							var product = []
							for(var i = 0; i < list.length; i++){
								var str = {
									product_id:list[i].product_id,
									product_number:list[i].product_number,
									product_price:list[i].product_price,
									product_type:list[i].product_type,
									is_appoint:2,
									employee:[],
								}
								product.push(str);
							}
							
							var data = {
								url:"/api/order/point_convert",
								data:{
									access_token:acctoken(),
									member_id:that.mid,
									order_money:0,
									reduce_money:0,
									pay_money:0,
									sex:that.sex,
									remark:"",
									product:product,
								}
							}
							ajax(data,function(res){
								console.log("兑换结果",res);
								var list = {
									list:res.data
								}
								//?list='+JSON.stringify(list)
								mui.openWindow({
				                	url:'../general/changeTheResults.html',
				                	id:'changeTheResults',
				                	extras: list,
				                })
								
							})
							
							
		           	 	});
						that.getproduct();
						that.getsortlist();
						that.getmemberlist();
					},
					
					//获取会员详情
					getmemberlist:function(){
						var that = this;
						var data = {
							url:"/api/member/detail",
							data:{access_token:acctoken(),id:that.mid}
						}
						ajax(data,function(res){
							console.log("会员详情",res);
							that.stay_score = res.data.stay_score;
							that.sex = res.data.sex;
							that.setmamber(res.data)
						})
					},
					
					//设置会员信息
					setmamber:function(data){
						var str = '<div class="mimg">';
						if(data.images&&data.images.path_name){
		    				str += '<img class="border50" src="'+data.images.path_name+'"/>';
			    		}else{
			    			str += '<img class="border50" src="../img/member-header.png"/>';
			    		}
		    			str += '</div><div class="mtext"><span id="">'+
		    			data.username+
		    			'</span><span class="fe08">卡号：'+
		    			data.card_number+
		    			'</span><span class="fe08">';
		    			if(null != data.member_level){
		    				str += data.member_level.member_level;
		    			}
		    			
		    			str += '<span style="padding-left: 1em;">积分：'+
		    			data.stay_score+
		    			'</span></span></div>';
		    			g("memberid").innerHTML = str;
					},
					
					//获取商品数据
					getsortlist:function(sid){
						var that = this;
						var data = {
							url:"/api/product/list_sort",
							data:{
								access_token:acctoken(),
								sort_id:that.tarnum,
								key:g("keyvalue").value,
								page:that.pagenums
							}
						}
						ajax(data,function(res){
							console.log("商品数据",res);
							let list = res.data.data;
								if(list.length > 0){
									list.forEach(function(item,index){
										that.plist.push(item);
									})
									that.plist = remove_duplicate(that.plist);
									that.setsortlist(that.plist);
									$("#moreid").removeClass("hidden");
									if(list.length < res.data.per_page){
										$("#moreid").addClass("hidden");
									}
								}else{
									if(that.pagenums == 1){
										var str = '<div class="nolistdiv">暂无记录<div>';
										g("tmain").innerHTML = str;
										$("#moreid").addClass("hidden");
									}else{
				                		upToRefresh();
										that.pagenums--;
										$("#moreid").addClass("hidden");
										mui.toast('没有更多数据了');
									}
								}
						})
					},
					
					//设置商品数据
					setsortlist:function(data){
						var that = this;
						var str = "";
						for(var i = 0; i < data.length; i++){
				    		str += '<div class="goodsdiv"><div class="topdiv"><div class="topimg">';
				    		
				    		if(data[i].product_images&&data[i].product_images.path_name){
				    			str += '<img src="'+data[i].product_images.path_name+'"/>';
				    		}else{
				    			str += '<img src="../img/noimg.png"/>';
				    		}
				    		
				    		str += '</div><div class="toptext"><div class="textdiv"><span class="fe09">'+
		    			data[i].product_name +
		    			'</span><span class="fe05">￥'+
		    			data[i].retail_price +
		    			'</span></div><div class="textdiv"><span class="fe05">库存：'+
		    			data[i].stock +
		    			'</span></div><div class="textdiv"><span class="fe05">积分：'+
		    			data[i].convert_point +
		    			'</span></div><div class="">'+
	    				'<div class="mui-numbox" data-numbox-step="1" data-numbox-min="0" data-numbox-max="100">'+
				        '<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>'+
				        '<input class="mui-input-numbox" id="num'+ data[i].id +'" type="number" '+
				        'product_id="'+data[i].id+'"'+
				        ' />'+
				        '<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>'+
		    			'</div></div></div></div></div>';
				    				
				    				
				    				
				    			//console.log($("#num"+data[i].id));	
						}
						g("tmain").innerHTML = str;
						mui('.mui-numbox').numbox();
						
						for(var i = 0; i < data.length; i++){
							that.addnuminput(data[i]);
						}
					},
					
					//监听数量变化
					addnuminput:function(data){
						var that = this;
						$("#num"+data.id).on("change input propertychange",function(){
				    				//console.log(this.value);
				    				if(this.value>0){
				    					var list = {
				    						product_id:data.id,
				    						product_number:this.value,
				    						product_name:data.product_name,
				    						product_price:data.member_price,
				    						images:data.images,
				    						sort:data.sort,
				    						product_type:data.product_type,
				    						is_appoint:1,
				    						convert_point:data.convert_point,
				    						employee:[]
				    					}
				    					that.addgwc(list);
				    				}else{
				    					that.delgwc(data.id);
				    				}
				    		})
						
					},
					//删除
					delgwc:function(id){
						var that = this;
						var list = that.glist;
						console.log(list);
						for(var i = 0; i < list.length; i++){
							console.log(list[i].product_id == id);
							if(list[i].product_id == id){
								list.splice(i,1);
							}
						}
						that.glist = list
						that.setmoneyid();
					},
					//添加商品
					addgwc:function(list){
						var that = this;
						var glist = that.glist;
						if(glist.length > 0){
							for(var i = 0 ; i < glist.length; i++){
								if(glist[i].product_id == list.product_id){
									glist[i].product_number = list.product_number;
									break;
								}else{
									for(var j = 0; j < glist.length; j++){
										var flag = true;
										if(glist[j].product_id == list.product_id){
											flag == false;
											break;
										}
										if(flag && j == glist.length-1){
											glist.push(list);
										}
									}
								}
							}
						}else{
							glist.push(list);
						}
						console.log(glist);
						that.glist = glist;
						that.setmoneyid()
					},
					//计算积分总数
					setmoneyid:function(){
						var that = this;
						var money = 0;
						var glist = that.glist;
						for(var i = 0; i < glist.length; i++){
							money += (parseFloat(glist[i].product_number)*parseFloat(glist[i].convert_point));
						}
						if(money > that.stay_score){
							mui.toast("积分不足");
						}
						g("moneyid").innerHTML = "积分："+parseFloat(money).toFixed(2);
					},
					//获取商品类型
					getproduct:function(){
						var that = this;
						var data = {url:"/api/product_sort/lst",data:{access_token:acctoken()}}
						ajax(data,function(res){
							console.log("获取商品类型",res)
							var str = '<div class="bgw" id="0">所有商品</div>';
							for(var i = 0; i < res.data.length; i++){
								str += '<div class="" id="'+res.data[i].id+'" onclick="">'+
						    			res.data[i].name+
						    			'</div>';
							}
							g("selectdiv").innerHTML = str;
							that.glist = [];
						});
					},
				});
				
				var c = new cashier();
				c.onReady();
				cash = c;
				document.onkeydown = function(event) {
					var e = event || window.event || arguments.callee.caller.arguments[0];
					if(e && e.keyCode == 13) {
						c.pagenums = 1;
				        c.plist = [];
				        upToRefresh();
						c.getsortlist();
					}
				}
				
			})()
			
			//刷新页面
			function onshow(){
				cash.glist = [];
				cash.getsortlist();
				cash.setmoneyid();
			}
		</script>
		
	</body>

</html>